// 顶部导航 1、鼠标经过全目录显示大盒子 
//         2、 鼠标经过长条图显示大图片  隐藏长条图
// 未实现需求：
//          1、左侧导航三个精灵图鼠标移动显示图片事件，或者点击事件跳转
//          2、左侧导航过渡效果线条
//          3、左侧导航点击立即试玩弹出提示框
//          4、顶部导航轮播后就无法点到对应按钮
// ldp_顶部导航 start
#topBar-main {
  .ldp_top {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    justify-content: space-between;
    // 游戏全目录
    .ldp_top-main {
      position: relative;
      width: 179px;
      .ldp_btn {
        position: relative;
        display: block;
        width: 179px;
        height: 54px;
        background-color: #cf1132;
        color: #fff !important;
        font-size: 12px;
        cursor: pointer;
        text-align: center;
        line-height: 54px;
        i {
          display: inline-block;
          width: 25px;
          height: 11px;
          background: url(../images/ldp_images/ldp_top-jl.png) -90px -306px no-repeat;
          margin-right: 8px;
        }

      }

      // 隐藏的通栏
      .ldp_tl {
        display: none;
        width: 100%;
        height: 400px;
        position: fixed;
        z-index: 99;
        top: 54px;
        left: 0;
        .ldp_top-w {
          width: 100%;
          height: 100%;
          .ldp_dd {
            display: flex;
            justify-content: space-around;
            ul {
              flex: 1;
              height: 380px;
              background-color: #fff;
              opacity:0.9;
              margin-top: 0px;
              p {
                font-weight: 700;
                font-size: 16px;
                text-align: center;
                color: red;
                padding-top: 10px;
                margin-bottom: 20px;
              }
              li {
                padding: 2px;
                font-size: 12px;
                text-align: center;
              }
            }
          }

        }
      }
    }
  


// 图片
.ldp_top-news {
  position: absolute;
  z-index: 13;
  width: 420px;
  height: 54px;
  left: 180px;
  padding-top: 0;
  overflow: hidden;

  // 长条图片
  .ldp_img {
    display: block;
    width: 960px;
    display: block;
    height: 0px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  }

  // 鼠标经过显示的大图片 
  .ldp_big {
    display: none;
    position: fixed;
    top: 54px;
    left: 180px;
  }
}

// 中间logo链接
.ldp_top-logo {
  width: 133px;
  height: 44px;
  display: inline-block;
  margin-top: 6px;
  background: url(../images/ldp_images/ldp-logo_b5525b7.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  margin-top: 5px;
}

// 右侧两个按钮
.ldp_top-right {
  position: absolute;
  right: 130px;
  top: 0;
  display: block;
  width: 138px;
  height: 54px;
  overflow: hidden;
  z-index: 9;
  border-left: 1px solid #dadada;

  a {
    display: block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    color: #626262;
  }
}

.ldp_top-recommend {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 129px;
  height: 54px;
  overflow: hidden;
  border-left: 1px solid #dadada;

  a {
    display: block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    color: #626262;

    i {
      display: inline-block;
      width: 17px;
      height: 20px;
      background: url(../images/ldp_images/ldp_top-jl.png) -81px -343px no-repeat;
      position: relative;
      top: 5px;
      margin-right: 10px;

    }
  }
}
}
}
// ldp_顶部导航 end 

// ldp_左侧导航信息 star
#side-menu {
  // 默认展示内容
  // 大盒子背景图片
  background: url(../images/ldp_images/ldp_bg01.webp);
  background-position:left -140px ;
  // 顶部图片
  .side-logo{
    width: 250px;
    height: 67px;
    background-image: url(../images/ldp_images/ldp_bg-top.webp);
    background-repeat: no-repeat;
    background-position: center center;
  }

  // 菜单字体图标
  .ldp_menu {
    display: none;
    .iconfont.icon-xitongcaidan {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      height: 50px;
      font-size: 40px;
      color: #ffffff;
      text-align: center;
    }

    // 菜单文字
    .ldp_text {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      color: #fff;
      font-size: 16px;
    }
  }

  // 中间三个大按钮
  .ldp_center {
    // 下载游戏
    .ldp_down {
      display: block;
      width: 247px;
      height: 91px;
      background: url(../images/ldp_images/ldp_bg02.webp) no-repeat;

      @keyframes BX_SprAniKey {
        0% {
          background-position: 0px 0px;
        }

        2.13% {
          background-position: -247px 0px;
        }

        4.26% {
          background-position: -494px 0px;
        }

        6.38% {
          background-position: -741px 0px;
        }

        8.51% {
          background-position: -988px 0px;
        }

        10.64% {
          background-position: -1235px 0px;
        }

        12.77% {
          background-position: -1482px 0px;
        }

        14.89% {
          background-position: -1729px 0px;
        }

        17.02% {
          background-position: -1976px 0px;
        }

        19.15% {
          background-position: -2223px 0px;
        }

        21.28% {
          background-position: -2470px 0px;
        }

        23.4% {
          background-position: -2717px 0px;
        }

        25.53% {
          background-position: 0px -91px;
        }

        27.66% {
          background-position: -247px -91px;
        }

        29.79% {
          background-position: -494px -91px;
        }

        31.91% {
          background-position: -741px -91px;
        }

        34.04% {
          background-position: -988px -91px;
        }

        36.17% {
          background-position: -1235px -91px;
        }

        38.3% {
          background-position: -1482px -91px;
        }

        40.43% {
          background-position: -1729px -91px;
        }

        42.55% {
          background-position: -1976px -91px;
        }

        44.68% {
          background-position: -2223px -91px;
        }

        46.81% {
          background-position: -2470px -91px;
        }

        48.94% {
          background-position: -2717px -91px;
        }

        51.06% {
          background-position: 0px -182px;
        }

        53.19% {
          background-position: -247px -182px;
        }

        55.32% {
          background-position: -494px -182px;
        }

        57.45% {
          background-position: -741px -182px;
        }

        59.57% {
          background-position: -988px -182px;
        }

        61.7% {
          background-position: -1235px -182px;
        }

        63.83% {
          background-position: -1482px -182px;
        }

        65.96% {
          background-position: -1729px -182px;
        }

        68.09% {
          background-position: -1976px -182px;
        }

        70.21% {
          background-position: -2223px -182px;
        }

        72.34% {
          background-position: -2470px -182px;
        }

        74.47% {
          background-position: -2717px -182px;
        }

        76.6% {
          background-position: 0px -273px;
        }

        78.72% {
          background-position: -247px -273px;
        }

        80.85% {
          background-position: -494px -273px;
        }

        82.98% {
          background-position: -741px -273px;
        }

        85.11% {
          background-position: -988px -273px;
        }

        87.23% {
          background-position: -1235px -273px;
        }

        89.36% {
          background-position: -1482px -273px;
        }

        91.49% {
          background-position: -1729px -273px;
        }

        93.62% {
          background-position: -1976px -273px;
        }

        95.74% {
          background-position: -2223px -273px;
        }

        97.87% {
          background-position: -2470px -273px;
        }

        100% {
          background-position: -2717px -273px;
        }
      }

      animation: BX_SprAniKey 2s steps(1) 0s infinite normal none;
    }

    // 互通版
    .ldp_interflow {
      display: block;
      width: 247px;
      height: 80px;
      background: url(../images/ldp_images/ldp_bg03.webp) no-repeat;

    }
    //  立即试玩
    .ldp_try {
      display: block;
      width: 247px;
      height: 80px;
      background: url(../images/ldp_images/ldp_bg04.webp) no-repeat;
    }

  }

  // 三个小图标
  .ldp_cion {
    position: absolute;
    width: 247px;
    height: 91px;

    .ldp_wb {
      display: inline-block;
      width: 50px;
      height: 60px;
      position: relative;
      top: -9px;
      left: 40px;
      background-image: url(../images/ldp_images/ldp_bg_jl.webp);
      background-repeat: no-repeat;
      background-position: 16px -25px;
    }

    .ldp_wx {
      display: inline-block;
      width: 50px;
      height: 60px;
      position: relative;
      top: -9px;
      left: 40px;
      background-image: url(../images/ldp_images/ldp_bg_jl.webp);
      background-repeat: no-repeat;
      background-position: -24px -25px;
    }

    .ldp_ewm {
      display: inline-block;
      width: 50px;
      height: 60px;
      position: relative;
      top: -9px;
      left: 40px;
      background-image: url(../images/ldp_images/ldp_bg_jl.webp);
      background-repeat: no-repeat;
      background-position: -61px -25px;
    }
  }

  // 六个图标
  .ldp_tubiao {
    float: left;
    width: 100%;
    position: relative;

    .ldp_links {
      float: left;
      height: 100px;
      text-align: center;
      margin-left: 25px;

      li {
        float: left;
        width: 50px;
        height: 80px;
        margin-right: 15px;
        margin-top: 20px;
        
        a {
          float: left;
          display: block;
          color: #d8d5d5;
          font-size: 12px;

          .ldp_icon1 {
            z-index: 99;
            display: inline-block;
            width: 54px;
            height: 54px;
            margin: 10px auto;
            border: 1px solid #3d3751;
            border-radius: 50%;
            background-image: url(../images/ldp_images/ldp_bg_jl2.webp);
            background-repeat: no-repeat;
            background-position: 15px 12px;
          }
          .ldp_icon1:hover {
            border: 1px solid #fff;
          }


          .ldp_icon2 {
            z-index: 99;
            display: inline-block;
            width: 54px;
            height: 54px;
            margin: 10px auto;
            border: 1px solid #3d3751;
            border-radius: 50%;
            background-image: url(../images/ldp_images/ldp_bg_jl2.webp);
            background-repeat: no-repeat;
            background-position: -52px 12px;
          }
          .ldp_icon2:hover {
            border: 1px solid #fff;
          }

          .ldp_icon3 {
            z-index: 99;
            display: inline-block;
            width: 54px;
            height: 54px;
            margin: 10px auto;
            border: 1px solid #3d3751;
            border-radius: 50%;
            background-image: url(../images/ldp_images/ldp_bg_jl2.webp);
            background-repeat: no-repeat;
            background-position: -121px 12px;
          }
          .ldp_icon3:hover {
            border: 1px solid #fff;
          }

          .ldp_icon4 {
            z-index: 99;
            display: inline-block;
            width: 54px;
            height: 54px;
            margin: 10px auto;
            border: 1px solid #3d3751;
            border-radius: 50%;
            background-image: url(../images/ldp_images/ldp_bg_jl2.webp);
            background-repeat: no-repeat;
            background-position: 15px -86px;
          }
          .ldp_icon4:hover {
            border: 1px solid #fff;
          }

          .ldp_icon5 {
            z-index: 99;
            display: inline-block;
            width: 54px;
            height: 54px;
            margin: 10px auto;
            border: 1px solid #3d3751;
            border-radius: 50%;
            background-image: url(../images/ldp_images/ldp_bg_jl2.webp);
            background-repeat: no-repeat;
            background-position: -53px -86px;
          }
          .ldp_icon5:hover {
            border: 1px solid #fff;
          }

          .ldp_icon6 {
            z-index: 99;
            display: inline-block;
            width: 54px;
            height: 54px;
            margin: 10px auto;
            border: 1px solid #3d3751;
            border-radius: 50%;
            background-image: url(../images/ldp_images/ldp_bg_jl2.webp);
            background-repeat: no-repeat;
            background-position: -121px -86px;
          }
          .ldp_icon6:hover {
            border: 1px solid #fff;
          }
        }
      }
      a:hover {
        color:#fff;
      }

    }
  }

  // 搜索框
  .ldp_search {
    border: 1px solid #484669;
    width: 92px;
    height: 38px;
    margin: 20px auto;
    border-radius: 30px;
    position: relative;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    top: 220px;

    .ldp_btn {
      background: url(../images/ldp_images/ldp_search.webp) no-repeat;
      width: 20px;
      height: 21px;
      display: block;
      position: absolute;
      left: 6px;
      top: 8px;
      color: #fff;
    }

    .ldp_input {
      background: none;
      width: 100%;
      height: 100%;
      outline: 0;
      font-size: 16px;
      color: #fff;
      line-height: 40px;
      text-align: center;
      position: relative;
      top: -80px;
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 20px;
    }
  }
}
// ldp_左侧导航信息 end

// ldp_底部版权信息 start
#footer {
  width: 100%;

  // 查看版权链接
  .ldp_bq {
    position: fixed;
    right: 20px;
    bottom: 20px;
    pointer-events: all;
    text-decoration: none;
    z-index: 102;
    .ldp_txt {
      font-size: 16px;
    }
  }

  .ldp_yc {
    display: none;
    width: 100%;
    height: 133px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);

    // 版心居中
    .ldp_w {
      a {
        color: #fff;
      }

      width: 1226px;
      height: 100%;
      margin: auto;

      // 上盒子
      .ldp_top {
        .ldp_left {
          display: inline-block;
          margin-top: 15px;

          a {
            img {
              padding: 0px 10px;
            }
          }
        }

        .ldp_right {
          .ldp_banquan {
            margin-left: 473px;
          }
        }
      }

      // 下盒子
      .ldp_bottom {
        p {
          display: inline-block;
          margin-top: 15px;
        }

      }
    }

  }
}

// ldp_底部版权信息 end